<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="/jqGrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" href="/select2/css/select2.css" />
	<link rel="stylesheet" type="text/css"  href="/themes/<%= theme %>/jquery-ui.min.css" />

	<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="/jqGrid/js/grid.locale-cn.js"></script>
	<script type="text/javascript" src="/jqGrid/js/jquery.jqGrid.js"></script>
	<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/select2/js/pinyin.min.js" ></script>
	<script type="text/javascript" src="/select2/js/select2.full.js" ></script>
	<script type="text/javascript" src="/select2/js/zh-CN.js" ></script>
	<script type="text/javascript" src="/js/index.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-size: small;
		}
        html, body {
            /*overflow-x: hidden;*/
            -ms-overflow-style: scrollbar;
            height: 100%;
            box-sizing: border-box;
        }
	</style>
</head>
<body>
<div id="list_1" style="padding:5px;">
    <table id="list"></table>
    <div id="pager"></div>
</div>
<script type="text/javascript">
	$(function(){
		$(window).resize(function(){
			$(window).unbind("onresize");
			$("#list").jqGrid('setGridWidth', $("#list_1").width());//.jqGrid('setGridHeight', winWh.WinH-86);
			$(window).bind("onresize", this);
		});
	});
	// $.fn.select2.defaults.theme_default = "jquery-ui";
	$(document).ready(function() {
		function getShopNames() {
			let data = "";
			runAjax('get', '/users/shops', {}, function (err, result) {
				if (!err) {
					for (let i = 0; i < result.rows.length; i++) {
						if (i != result.rows.length - 1) {
							data += result.rows[i]._id + ":" + result.rows[i].name + ";";
						} else {
							data += result.rows[i]._id + ":" + result.rows[i].name;
						}
					}
				}
			});
			return data;
		}
        jQuery("#list").jqGrid({
				url:'/users/lists', //
				datatype: "json",
				/*dataType:'local',*/
				mtype : "GET",
				// postData:{'keyword':encodeURI(encodeURI(keyword))},
				// loadonce:true,
				shrinkToFit:true,
				height: 'auto',
				width:"100%",
				autowidth:true,
				colModel:[
					{label:'账户', name:'_id',index:'_id', hidden:false,editable : true,
						editrules: {required: true},
						formoptions: {
							/*rowpos: 3, colpos: 1,*/
							elmprefix: '<span style="color: red;">*</span>'
						}}, //width:60,
					{label:'姓名',name:'name',index:'name',editor:"text", editable : true,
						editrules: {required: true},
						formoptions: {
							/*rowpos: 3, colpos: 1,*/
							elmprefix: '<span style="color: red;">*</span>'
						}},
					{
						label: '店铺',
						name: 'sId',
						index: 'sId',
						editor: "text",
						formatter: "select",
						edittype: "select",
						editable: true,
						editoptions: {
							value: getShopNames(),
							dataInit: function (elem) {
								$(elem).select2({
									language: "zh-CN",
									dropdownParent: $(elem).parent(),
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
									// theme: "classic",
								});
							}
						},
						editrules: {required: true},
						formoptions: {
							/*rowpos: 3, colpos: 1,*/
							elmprefix: '<span style="color: red;">*</span>'
						},
						stype: 'select',
						searchoptions: {
							value: {},
							dataInit: function (elem) {
								$(elem).css({width: "100%"}).select2({
									language: "zh-CN",
									dropdownParent: $(elem).parent(),
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
									// theme: "classic",
								});
							},
							sopt: ["eq", "ne"]
						}
					},
					{label:'操作',name : 'act',index : 'act',width : 80,editable : false,sortable : false,
						formatter: function (cellvalue, options, rowObject ) {
						return '<a href="javascript:void(0);" style="color:#0f0;float:left;" onclick=SettingPermissions("'+ options.rowId + '","' + rowObject.name + '");>设置权限</a>';;
					}}
				],
				sortname:'_id',
				sortorder:'asc',
				viewrecords:true,
				rowNum:10,
				rowList:[10,20,30],
				pager:"#pager",
				// caption: "<%= title %>",
				multiselect: false,
				jsonReader: {
					id: "_id",
					root : "rows",
					page:"page",
					total:"total",
					records:"records",
					repeatitems: false
				},
				loadComplete:function(xhr){
				}
			});
			jQuery("#list").jqGrid('navGrid','#pager',{add:true,edit:true,del:true,search:false,refresh:false},
				{
					checkOnSubmit:false, closeAfterEdit: true,reloadAfterSubmit:false,modal: true,
					url:"/users",
					mtype:"put",
					beforeShowForm : function(form) {
						form.find('#_id').attr('readOnly',true);//把编辑框中的字段设置为只读的。
					},
					onclickSubmit: function(params, postData) {
						params.url = "/users/" + postData.list_id + "/name";
						return [true,''];
					},
					beforeSubmit:function(postData, formid) {
						return [true,''];
					},
					afterSubmit:function(response, postData){
						return [true,''];
					}
				}, // edit
				{
					checkOnSubmit:false, closeAfterAdd: true,reloadAfterSubmit:false,modal: true,jqModal: true,addedrow:'last',
					url:"/users",
					mtype:"post",
					onclickSubmit: function(params, postData) {
						return [true,''];
					},
					beforeSubmit:function(postData, formid) {
						// check
						/* if(postData.id_room.replace(/(^s*)|(s*$)/g, "").length ==0)
						 {
						 return [false,'Name is empty!'];
						 }*/
						return [true,'']; //return [true, "", jqXhr.responseJSON.id];
					},
					afterSubmit:function(response, postData){
						var result=response.responseJSON;
						// postData.id = result.id;
						return [true,"",result.id];
					}
				}, // add
				{
					checkOnSubmit:false, reloadAfterSubmit:false,modal: true,
					url:"/users",
					mtype:"delete",
					onclickSubmit: function(params, id) {
						params.url = "/users/" + id;
						return [true,''];
					},
					afterSubmit:function(response, postData) {
						return [true, ''];
					}
				}, // del
				{} // search
			);
		});
	function SettingPermissions(id,name) {
		$(window.parent.addTab(id,"权限-" + name,"/users/rightsPage?id=" + id));
		return false;
	}
</script>
</body>
</html>
